<template>
  <div class="password">
    <el-form ref="passForm" :model="passwordForm" :rules="passRuler">
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model.trim="passwordForm.newPassword" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model.trim="passwordForm.confirmPassword" placeholder="请确认密码"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="formValidate('passForm',forgetTwo)">确认修改</el-button>
  </div>
</template>
<script>

import mixin from "@/utils/mixin.js";
export default {
  data() {
    var newPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.passwordForm.confirmPassword !== "") {
          this.$refs.passForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    var confirmPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      passwordForm: {
        newPassword: "",
        confirmPassword: "",
      },
      passRuler: {
        newPassword: [{ validator: newPassword, trigger: "blur" }],
        confirmPassword: [{ validator: confirmPassword, trigger: "blur" }],
      },
      ref: "passForm",
    };
  },
  mixins: [mixin],
  methods: {
    // 找密码第二步
    forgetTwo() {
      this.$http
        .put("/trademark/front/update", {
          phoneNum: this.$store.state.phoneNumber,
          password: this.passwordForm.newPassword,
        })
        .then(({ data: res }) => {
          if (res.code !== 200) return this.$message.error("密码修改失败");
          this.$message.success("密码修改成功");
        }, (err = this.$message.erro("网络错误")))
        .finally(() => this.$router.push("/login"));
    },
  },

  created() {
    document.addEventListener("keydown", this.keydown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.keydown);
  },
};
</script>
<style lang="less" scoped>
.password {
  .welcome {
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    text-align: center;
  }
  .el-form {
    margin-top: 1rem;
    /deep/.el-form-item__label {
      line-height: 1rem;
    }
    /deep/.el-input__inner {
      height: 2.5rem;
    }
    .el-button {
      margin-top: 20px;
      font-size: 1em;
    }
  }
  .el-button {
    width: 100%;
    height: 2.5rem;
    background-color: #013d87;
    color: #fff;
    margin-top: 2rem;
    font-size: 1.2em;
  }
}
</style>